<template>
	<view class="mypicker">
		<picker @change="bindPickerChange" :mode="range_type" :value="range_index" :range="range_array" :range-key="range_key_name">
			<slot></slot>
		</picker>
	</view>
</template>

<script>
import { common } from '@/util/method.js';

export default {
	name: 'mypicker',
	props: {
		range_array: {
			type: [Array],
			default: [],
		},
		range_index: {
			type: [String, Number],
			default: 0,
		},
		range_key_name: {
			type: [String],
			default: 'title',
		},
		range_type: {
			type: [String],
			default: 'selector',
		},
		item: {
			type: [Object],
		},
	},
	watch: {},
	data() {
		return {
			// index: 0,
			// array: [{ key: 0, title: '美国' }, { key: 1, title: '中国' }],
		};
	},
	created() {
		this.init_pagedata('mypicker');
	},
	mounted() {},
	methods: {
		...common,
		bindPickerChange: function (e) {
			let _this = this;
			let select = _this.range_array[e.detail.value];
			this.$emit('change', {
				item: _this.item,
				value: select['key'],
				index: e.detail.value,
				select,
			});
		},
	},
};
</script>

<style lang="scss"></style>
